React Redux
https://gyazo.com/dc5d0c89914f9d62dc7b084367ae1acd
React Redux · React Redux Documentation
React Redux is the official React UI bindings layer for Redux. It lets your React components read data from a Redux store, and dispatch actions to the store to update state.
Chrome dev toolを使うと状態が覗ける
Redux DevTools - Chrome Web Store
歴史
Idiomatic Redux: The History and Implementation of React-Redux · Mark's Dev Blog
useSelector()
The selector will be called with the entire Redux store state as its only argument.
いつ実行されるか
The selector will be run whenever the function component renders. useSelector() will also subscribe to the Redux store, and run your selector whenever an action is dispatched.
Actionがdispatchされたとき
FCがrenderされたとき
実行ごとに別関数になるので状態保持しない
メモ化したいなら
createSelector from reselect を使う
典型的ユースケース
スタートに依存する場合
コンポーネントの外でuseSelectorする
dispatch()
stateを保存する
action(typeとpayload)を指定する
code:js
const dispatch = useDispatch();
dispatch({
type:
payload:
});
一部のプロパティだけ更新したい
Immutable Update Patterns · Reduxのあたり?
Immutability Helpers – Reactがつかえるかも
/namaozi/Redux.Hooks